<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>登录</title>
     <script src="/static/plugs/jquery/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/static/plugs/layer/layer.css">
    <script src="/static/plugs/layer/layer.js"></script>
    <style type="text/css">
    html,body{width:100%;height:100%;margin:0;}
    body{display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/}
        .login{
            width:400px;height:300px;
            margin-top:-200px;
            background-color: #f2f2f2;
        }
        .login .form {text-align: center;margin-top:50px;}
    .login .form .item{padding:10px;height:30px;}
    .login .form .item label{}
    .login .form .item input{padding:6px;border:1px solid #ccc}
    .btn-submit{padding:5px 10px;background-color:#0088cc;color:#fff;border:1px solid #33bbff}
    </style>
    
  </head>
  <body>
   
<div class="login">
    <form class="form" action="" method="POST">
      <div class="item">
          <label>账号：</label>
          <input type="text" name="username" placeholder="请输入账号">
      </div>
      <div class="item">
          <label>密码：</label>
          <input type="password" name="password" placeholder="请输入密码">
      </div>
      <div class="item">
          <label></label>
          <button type="button" class="btn-submit" onclick="login()"> 登 陆 </button>
      </div>
    </form>
</div>
<script type="text/javascript">
    function login(){
        var username=$("input[name='username']").val();
        var password=$("input[name='password']").val();
        if(username=='')
        {
            layer.msg("请输入账号");
            return;
        }
         if(password=='')
        {
            layer.msg("请输入密码");
            return;
        }
        $(".form").submit()
    }
</script>
</html>